<template>
    <el-dialog
    title="添加服务"
    :visible.sync="addTypeData.dialogState"
    size="tiny"
    class="dialog-box"
    >
        <el-form class="form-content" :model="dataForm" :rules="rules" ref="dataForm" label-width="80px"  label-position='left'>
            <el-row :gutter="21" class="school-item">
                <el-col :span="24">
                    <el-form-item label="服务名称" prop="serviceName" :rules="rules.serviceName">
                       <el-input v-model="dataForm.serviceName" style="width:95%;"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="服务详情" prop="serviceDetail" :rules="rules.serviceDetail">
                        <el-input 
                        v-model="dataForm.serviceDetail" 
                        style="width:95%;"
                        type="textarea"
                        :rows="5"
                        placeholder="请输入内容"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm('dataForm')"> 确 定 </el-button>
            <el-button @click="resetForm('dataForm')"> 取 消 </el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        props: {
            addTypeData: {
                default() {
                    return {
                        dialogState: false
                    }
                },
                required: true
            }
        },
        data() {
            return {
                dataForm: {
                    serviceName: '',
                    serviceDetail: ''
                },
                rules: {
                    serviceName: [
                        { required: true, message: '内容不能为空', trigger: 'blur' },
                        { min: 1, max: 10, message: '长度在10个字符以内', trigger: 'blur' }
                    ],
                    serviceDetail: [
                        { required: true, message: '内容不能为空', trigger: 'blur' },
                        { min: 1, max: 150, message: '长度在150个字符以内', trigger: 'blur' }
                    ]
                }
            }
        },
        computed: {
            
        },
        methods: {
            submitForm(dataForm) {
                this.$refs[dataForm].validate((valid) => {
                    if (valid) {

                        // insertClassInfo().then(response => {
                        //     this.$message.success(response.data.errorMsg);
                        //     this.addTypeData.dialogState = false;
                        //     this.$emit('search');
                        //     this.$refs[dataForm].resetFields();
                        // })
                    }
                })
            },
            resetForm(dataForm) {
                this.addTypeData.dialogState = false;
                this.$refs[dataForm].resetFields();
            }
        }
    }

</script>

<style lang="scss" scoped>
    .dialog-box{
        .el-dialog__header{
            text-align:center;
            background:#f7f7f9;
            height:54px;
            .el-dialog__title{
                font-size:20px;
                color:#333;
            }
        }
        .form-content{
            width: 80%;
            margin: 0 auto; 
        }
        .dialog-footer{
            width: 80%;
            margin: 0 auto; 
            text-align:center;
            margin-top:100px;
        }
    }
</style>